<template>
	<view>
		<view style="height: 160rpx;box-sizing:border-box; padding-top: 81rpx;border-bottom: 2rpx solid #F7F7F7;">
			<image src="/static/shequ/fh.png" @click="backTo" style="margin: 0 259rpx 0 30rpx; width: 18rpx;height: 32rpx;" mode="aspectFit"></image>
			<text style="font-size: 32rpx;">优惠券</text>
		</view>
		<view style="margin: 0 30rpx;">
			<view class="youhui-tab">
				<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
					<block v-for="(item, index) in use" :key="index">
						<view class="scroll-tab-item" :class="{ active: useIndex == index }" @tap="yhj(index)">
							{{ item }}
							<view class="select"></view>
						</view>
					</block>
				</scroll-view>
			</view>
			<view v-if="useIndex === 0">
				<block v-for="(tic,index) in tickets" :key="tic">
					<view  style="display: flex; font-size: 24rpx;box-shadow: 0 0 5rpx 2rpx #f7f7f7;width: 690rpx;height: 200rpx;border-radius: 24rpx;margin: 40rpx auto -10rpx;">
						<view style="color: #FF6F00;margin-left: 26rpx;display: flex;align-items: center;">
							<text>¥</text>
							<text>{{tic.credit}}</text>
						</view>
						<view style="color: #999;display: flex;flex-direction: column;margin: 33rpx 0 33rpx 30rpx;line-height: 40rpx;">
							<text style="font-size: 32rpx;color: #1B1B1B;">{{tic.voucher_title}}</text>
							<text>满{{tic.limit_money}}可用</text>
							<text>{{tic.end_time}}到期</text>
						</view>
						<button type="default" style="width: 150rpx;height: 60rpx;border-radius: 30rpx;font-size: 24rpx;color: #fff;background-color: #00C657;margin: 55rpx 30rpx 55rpx auto;"
						 :class="{'btn':tic.flag }" @click="skipUse" :disabled="tic.flag"
						>去使用</button>
					</view>
				</block>
			</view>
			<view v-if="useIndex === 1">
				<block v-for="(tic,index) in tickets" :key="tic">
					<view v-if="tic.is_use==1" style="display: flex; font-size: 24rpx;box-shadow: 0 0 5rpx 2rpx #f7f7f7;width: 690rpx;height: 200rpx;border-radius: 24rpx;margin: 40rpx auto -10rpx;">
						<view style="color: #FF6F00;margin-left: 26rpx;display: flex;align-items: center;">
							<text>¥</text>
							<text>{{tic.credit}}</text>
						</view>
						<view style="color: #999;display: flex;flex-direction: column;margin: 33rpx 0 33rpx 30rpx;line-height: 40rpx;">
							<text style="font-size: 32rpx;color: #1B1B1B;">{{tic.voucher_title}}</text>
							<text>满{{tic.limit_money}}可用</text>
							<text>{{tic.end_time}}到期</text>
						</view>
						<button type="default" style="width: 150rpx;height: 60rpx;border-radius: 30rpx;font-size: 24rpx;color: #fff;background-color: #00C657;margin: 55rpx 30rpx 55rpx 100rpx;"
						 :class="{'btn':tic.flag }" @click="skip" :disabled="tic.flag"
						>已使用</button>
					</view>
				</block>
			</view>
			<view v-if="useIndex === 2">
				<block v-for="(tic,index) in tickets" :key="tic">
					<view v-if="tic.is_over==1" style="display: flex; font-size: 24rpx;box-shadow: 0 0 5rpx 2rpx #f7f7f7;width: 690rpx;height: 200rpx;border-radius: 24rpx;margin: 40rpx auto -10rpx;">
						<view style="color: #FF6F00;margin-left: 26rpx;display: flex;align-items: center;">
							<text>¥</text>
							<text>{{tic.credit}}</text>
						</view>
						<view style="color: #999;display: flex;flex-direction: column;margin: 33rpx 0 33rpx 30rpx;line-height: 40rpx;">
							<text style="font-size: 32rpx;color: #1B1B1B;">{{tic.voucher_title}}</text>
							<text>满{{tic.limit_money}}可用</text>
							<text>{{tic.end_time}}到期</text>
						</view>
						<button type="default" style="width: 150rpx;height: 60rpx;border-radius: 30rpx;font-size: 24rpx;color: #fff;background-color: #00C657;margin: 55rpx 30rpx 55rpx 100rpx;"
						 :class="{'btn':tic.flag }" @click="skip" :disabled="tic.flag"
						>已过期</button>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {Storage} from '@/static/libs/utils.js'
export default {
	data() {
		return {
			use: ['待使用', '已使用', '已过期'],
			useIndex: 0,
			tickets:[]
		};
	},
	onLoad() {
		this.token = Storage.get('token');
		this.getTicket()
	},
	methods: {
		backTo(){
			uni.switchTab({
				url:'/pages/me/me'
			})
		},
		yhj(index) {
			this.useIndex = index;
		},
		skipUse(){
			uni.navigateTo({
				url:'/pages/shequ/shequ'
			})
		},
		getTicket() {
			// 领劵中心
			this.$request.post(`/wxapp.php?i=undefined&t=undefined&v=undefined&from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&sign=5c5dab0533d7a850a391cbb216fb4bde&controller=user.collect_voucher&token=${this.token}`)
				.then(res => {
					this.tickets = res.data.list;
						// console.log(this.tickets );
					
				});
		}
	}
};
</script>

<style lang="scss">
.youhui-tab {
	font-size: 32rpx;
	color: #1b1b1b;
	margin: 0 66rpx -20rpx;
}
// .select {
// 	display: none;
// 	width: 48rpx;
// 	height: 6rpx;
// 	border-radius: 3rpx;
// 	background-color: #00c657;
// 	margin-left: 20rpx;
// }
.youhui-tab .active {
	// color: #1b1b1b;
	// font-size: 32rpx;
	// .select {
	// 	display: block;
	// 	margin-top: -10rpx;
	// }
	border-bottom: 2rpx solid #00C657;
}
.scroll-tab {
	white-space: nowrap; /* 必要，导航栏才能横向*/
	cursor: pointer;
	height: 140rpx;
	line-height: 100rpx;
	overflow-x: scroll;
}
.scroll-tab-item {
	display: inline-block; /* 必要，导航栏才能横向*/
	margin-right: 130rpx;
}
</style>
